<template lang="pug">
    sbpro-layout-default(
        footerClasses='bg-cse footer-dark'
    )

        sbpro-top-nav(
            topNavClasses='bg-cse navbar-dark fixed-top',
            brandClasses='text-white',
            buttonClasses='btn-teal'
        )

        sbpro-page-header(
            headerClasses='bg-img-cover overlay overlay-20 page-header-dark d-none d-sm-block',
            :borderType='computedBorder',
            borderClasses='text-light',
            backgroundImage='url("/assets/img/banners/carousel2.jpg")',
        )
            .page-header-content
                .container.text-center
                    .row.justify-content-center
                        .col-lg-8
                            h1.page-header-title {{categoryName}}
                            //p.page-header-text.mb-0 实训概况

        sbpro-page-section(
            sectionClasses='py-3 py-sm-5 bg-light',
            borderType='rounded',
            borderClasses='text-cse'
        )
            article-list(v-if="hasPosts")
            catalog(v-if="!hasPosts")

</template>

<script>
import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import ArticleList from './article-list';
import Catalog from './catalog';

export default {
    name: 'Category',
    components: {
        Catalog,
        ArticleList,
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
    },
    computed: {
        cid() {
            return parseInt(this.$route.params.cid);
        },
        categoryName() {
            return this.$store.getters.cName(this.cid);
        },
        computedBorder() {
            return this.hasPosts ? '' : 'rounded';
        },
        //判断该大类下是否有文章
        hasPosts() {
            return this.$store.getters.isLeaf(this.cid);
        },
    },
};
</script>

<style scoped lang="scss"></style>
